<template>
  <div id="orderDetail">
    <a-card>
      <a-row type="flex" justify="center" align="top">
        <a-col :span="4"><p class="height-100">订单信息</p></a-col>
        <a-col :span="12" style="border-bottom: 1px solid;margin-bottom: 20px">
          <a-row type="flex" justify="center" align="top">
            <a-col :span="6"><p class="height-100">订单编号：</p></a-col>
            <a-col :span="8"><p class="height-80">{{ orderInfo.id }}</p></a-col>
            <a-col :span="6"><p class="height-80">用户手机号：</p></a-col>
            <a-col :span="4"><p class="height-80">{{ orderInfo.phone || "无" }}</p></a-col>
          </a-row>
          <a-row type="flex" justify="center" align="top">
            <a-col :span="6"><p class="height-80">支付单号：</p></a-col>
            <a-col :span="8"><p class="height-80">{{ orderInfo.pay_no || "无" }}</p></a-col>
            <a-col :span="6"><p class="height-100">支付状态：</p></a-col>
            <a-col :span="4">
              <p class="height-80" v-if="orderInfo.pay_state === 10">待支付</p>
              <p class="height-80" v-if="orderInfo.pay_state === 20">支付成功</p>
              <p class="height-80" v-if="orderInfo.pay_state === 30">支付中</p>
              <p class="height-80" v-if="orderInfo.pay_state === 40">支付失败</p>
            </a-col>
          </a-row>
          <a-row type="flex" justify="center" align="top">
            <a-col :span="6"><p class="height-100">实付金额：</p></a-col>
            <a-col :span="8"><p class="height-80">{{ orderInfo.amount }}</p></a-col>
            <!--<a-col :span="6"><p class="height-80">购买数量：</p></a-col>
            <a-col :span="6"><p class="height-80">{{ orderInfo}}</p></a-col>-->
            <a-col :span="6"><p class="height-80">订单状态：</p></a-col>
            <a-col :span="4">
              <p class="height-80" v-if="orderInfo.order_state === 10">待付款</p>
              <p class="height-80" v-if="orderInfo.order_state === 20">待发货</p>
              <p class="height-80" v-if="orderInfo.order_stat === 30">待收货</p>
              <p class="height-80" v-if="orderInfo.order_state === 40">收货完成</p>
              <p class="height-80" v-if="orderInfo.order_state === 100">订单取消</p>
            </a-col>
          </a-row>
          <a-row type="flex" justify="center" align="top">
            <a-col :span="6"><p class="height-100">下单时间：</p></a-col>
            <a-col :span="18"><p class="height-80">{{ orderInfo.create_date_time || "无" }}</p></a-col>
          </a-row>
          <a-row type="flex" justify="center" align="top">
            <a-col :span="6"><p class="height-100">发货时间：</p></a-col>
            <a-col :span="18"><p class="height-80">{{ orderInfo.delivery_date_time || "无" }}</p></a-col>
          </a-row>
          <a-row type="flex" justify="center" align="top">
            <a-col :span="6"><p class="height-100">支付时间：</p></a-col>
            <a-col :span="18"><p class="height-80">{{ orderInfo.pay_date_time || "无" }}</p></a-col>
          </a-row>
          <a-row type="flex" justify="center" align="top">
            <a-col :span="6"><p class="height-100">收货时间：</p></a-col>
            <a-col :span="18"><p class="height-80">{{ orderInfo.receive_date_time || "无" }}</p></a-col>
          </a-row>
          <a-row type="flex" justify="center" align="top">
            <a-col :span="6"><p class="height-100">买家留言：</p></a-col>
            <a-col :span="18"><p class="height-80">{{ orderInfo.remarks || "无" }}</p></a-col>
          </a-row>
        </a-col>
      </a-row>

      <a-row type="flex" justify="center" align="top" >
        <a-col :span="4"><p class="height-100">购物清单</p></a-col>
        <a-col :span="12" style="border-bottom: 1px solid;margin-bottom: 20px" >
          <a-row style="margin-bottom: 10px" type="flex" justify="center" align="top" v-for="good in orderInfo.order_goods" >
            <a-col :span="8">
              <img :src="'https://admin.muyumall.com'+good.goods_img" alt="" height="100px">
            </a-col>
            <a-col :span="6"><p class="height-80">{{ good.name }}</p></a-col>
            <a-col :span="6"><p class="height-80">{{ good.price }}元</p></a-col>
            <a-col :span="4"><p class="height-80">X{{ good.number }}</p></a-col>
          </a-row>
        </a-col>
      </a-row>

      <a-row type="flex" justify="center" align="top">
        <a-col :span="4"><p class="height-100">收货地址</p></a-col>
        <a-col :span="12" style="border-bottom: 1px solid;margin-bottom: 20px">
          <a-row type="flex" justify="center" align="top">
            <a-col :span="6">收货人姓名</a-col>
            <a-col :span="6"><p class="height-80">{{ orderInfo.order_address.address_name || "无" }}</p></a-col>
            <a-col :span="6"><p class="height-80">手机号</p></a-col>
            <a-col :span="6"><p class="height-80">{{ orderInfo.order_address.address_phone || "无" }}</p></a-col>
          </a-row>

          <a-row type="flex" justify="center" align="top">
            <a-col :span="6"><p class="height-100">省市县</p></a-col>
            <a-col :span="18"><p class="height-80">{{ orderInfo.order_address.province || "无" }}>{{ orderInfo.order_address.city || "无" }}>{{ orderInfo.order_address.area || "无" }}</p></a-col>
          </a-row>

          <a-row type="flex" justify="center" align="top">
            <a-col :span="6"><p class="height-100">详细地址</p></a-col>
            <a-col :span="14"><p class="height-80">{{ orderInfo.order_address.detailed_address || "无" }}</p></a-col>
            <a-col :span="4"><a-button @click="doCopy">复制</a-button></a-col>
          </a-row>
        </a-col>
      </a-row>

      <a-row type="flex" justify="center" align="top">
        <a-col :span="4"><p class="height-100">运单号</p></a-col>
        <a-col :span="12" style="border-bottom: 1px solid;margin-bottom: 20px"><p class="height-100">{{ orderInfo.logistics_no || "无" }}</p></a-col>
      </a-row>

      <a-row type="flex" justify="center" align="top">
        <a-col :span="4"><a-button @click="back">返回</a-button></a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script>
import { queryOrderId } from '@/api/order'

export default {
  name: 'OrderDetail',
  data () {
    return {
      address: '',
      orderInfo: {},
      orderGoods: {},
      OrderAddress: {}
    }
  },
  mounted () {
    const order = this.$route.query
    console.log(order)
    this.getOrderInfo(order.id)
  },
  methods: {
    back () {
      this.$router.push({ path: 'order-list' })
    },
    doCopy () {
      const _this = this
      const addr = this.orderInfo.order_address
      this.address = addr.address_name + addr.address_phone + addr.province + addr.city + addr.area + addr.detailed_address
      this.$copyText(this.address).then(function (e) {
        _this.$message.success('复制成功！')
      })
    },
    // 根据id查询订单
    getOrderInfo (id) {
      queryOrderId({ id })
        .then(res => {
          console.log(res)
          this.orderInfo = res
        })
        .catch(err => {
          console.log(err)
          this.$message.error('获取订单详情失败！')
        })
    }
  }
}
</script>

<style scoped lang="less  ">

</style>
